<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('周报统计报表') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('工作日期(周)')">
        <DatePicker
          v-model="queryParams.date"
          type="week"
          format="yyyy年 第WW周"
          :placeholder="$t('工作日期(周)')"
        />
        <!-- (MM月-dd号) -->
      </el-form-item>
      <el-form-item :label="$t('部门')">
        <DeptSelect
          v-model="queryParams.dept"
          :placeholder="$t('部门')"
          filterable
          multiple
        />
      </el-form-item>
      <el-form-item :label="$t('用户')">
        <UserSelect
          v-model="queryParams.user"
          :placeholder="$t('用户')"
        />
      </el-form-item>
      <el-form-item :label="$t('填写情况')">
        <el-select v-model="queryParams.type" placeholder="请选择">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      tooltip-effect="darkTable"
      :data="anxinWeeklyList"
      border
      :row-class-name="tableRowClassName"
      class="noneHoverBg anxinWeeklyList"
    >
      <!-- :cell-style="isRed" -->
      <el-table-column :label="$t('周期')" prop="nickName" show-overflow-tooltip width="160" fixed="left">
        <template slot="header" slot-scope="{}">
          <span>{{ title }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('部门')" prop="deptName" show-overflow-tooltip width="120" />

      <el-table-column :label="$t('周一')" prop="day2" width="260">
        <template slot-scope="scope">
          <template v-for=" (item,index) in scope.row.day2">
            <p :key="index" class="w_deal">{{ item.dealName }}</p>
            <p :key="index" class="s_deal">{{ duration(item.duration) }}</p>
            <span :key="index" class="pre" type="text" @click="updateHandle(scope.row)">{{ item.workCompletion }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('周二')" prop="day3" width="260">
        <template slot-scope="scope">
          <template v-for=" (item,index) in scope.row.day3">
            <p :key="index" class="w_deal">{{ item.dealName }}</p>
            <p :key="index" class="s_deal">{{ duration(item.duration) }}</p>
            <span :key="index" class="pre" type="text" @click="updateHandle(scope.row)">{{ item.workCompletion }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('周三')" prop="day4" show-overflow-tooltip width="260">
        <template slot-scope="scope">
          <template v-for=" (item,index) in scope.row.day4">
            <p :key="index" class="w_deal">{{ item.dealName }}</p>
            <p :key="index" class="s_deal">{{ duration(item.duration) }}</p>
            <span :key="index" class="pre" type="text" @click="updateHandle(scope.row)">{{ item.workCompletion }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('周四')" prop="day5" show-overflow-tooltip width="260">
        <template slot-scope="scope">
          <template v-for=" (item,index) in scope.row.day5">
            <p :key="index" class="w_deal">{{ item.dealName }}</p>
            <p :key="index" class="s_deal">{{ duration(item.duration) }}</p>
            <span :key="index" class="pre" type="text" @click="updateHandle(scope.row)">{{ item.workCompletion }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('周五')" prop="day6" show-overflow-tooltip width="260">
        <template slot-scope="scope">
          <template v-for=" (item,index) in scope.row.day6">
            <p :key="index" class="w_deal">{{ item.dealName }}</p>
            <p :key="index" class="s_deal">{{ duration(item.duration) }}</p>
            <span :key="index" class="pre" type="text" @click="updateHandle(scope.row)">{{ item.workCompletion }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('周六')" prop="day7" show-overflow-tooltip width="260">
        <template slot-scope="scope">
          <template v-for=" (item,index) in scope.row.day7">
            <p :key="index" class="w_deal">{{ item.dealName }}</p>
            <p :key="index" class="s_deal"> {{ duration(item.duration) }}</p>
            <span :key="index" class="pre" type="text" @click="updateHandle(scope.row)">{{ item.workCompletion }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('周日')" prop="day1" show-overflow-tooltip width="260">
        <template slot-scope="scope">
          <template v-for=" (item,index) in scope.row.day1">
            <p :key="index" class="w_deal">{{ item.dealName }}</p>
            <p :key="index" class="s_deal"> {{ duration(item.duration) }}</p>
            <span :key="index" class="pre" type="text" @click="updateHandle(scope.row)">{{ item.workCompletion }}</span>
          </template>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改周报对话框 -->
    <el-dialog v-if="formOpen" :title="$t('周报')" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <anxinWeeklyForm ref="anxinWeeklyForm" />
    </el-dialog>
  </div>
</template>

<script>
import { weekReportlist } from '@/api/anxin/weekly/anxinWeekly'
import { downLoadExcel } from '@/utils/excelDownload'
import anxinWeeklyForm from './anxinWeeklyForm.vue'

import moment from 'moment'

export default {
  components: {
        anxinWeeklyForm
    },
  data() {
      return {
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          // 周报表格数据
          anxinWeeklyList: [],
          // 是否显示弹出层
          formOpen: false,
        // 是否驻场字典
        siteOptions: [],
          // 查询参数
          queryParams: {
              date: undefined,
              dept: [],
              type: '',
              user: '',
              yearWeek: '',
              pageNum: 1,
              pageSize: 10
          },
          // 记录日期范围
          dateRange: [],
          // 表单参数
          form: {},
          // 表单校验
          rules: {
          },
          title: '',
          typeList: [{
              value: 'Y',
              label: '已填写'
            }, {
              value: 'N',
              label: '未填写'
            }]
      }
  },
  created() {
    this.queryParams.date = new Date()
        this.getList()
  },
  methods: {
    /** 查询周报列表 */
    getList() {
        this.loading = true
           if (this.queryParams.date) {
            const weekOfday = moment(this.queryParams.date).format('E')// 计算今天是这周第几天
            const last_monday = moment(this.queryParams.date).subtract(weekOfday - 1, 'days').format('M月DD日')// 周一日期
            const last_sunday = moment(this.queryParams.date).subtract(weekOfday - 7, 'days').format('M月DD日')// 周日日期
            // const yearWeekStr = this.getWeekStr(this.queryParams.date)
             this.title = last_monday + '-' + last_sunday
          this.queryParams.yearWeek = this.getWeek(this.queryParams.date)
        } else {
          this.queryParams.yearWeek = undefined
            this.title = '工作日期(周)'
        }
        if (this.queryParams.dept) {
          this.queryParams.dept = this.queryParams.dept.toString()
        }
        weekReportlist(this.queryParams).then(response => {
            this.anxinWeeklyList = response.rows
            this.total = response.total
            this.loading = false
        })
    },
    /** 搜索按钮操作 */
    queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
        this.resetForm('queryForm')
        this.queryParams = {
              date: new Date(),
              dept: [],
              user: '',
              yearWeek: '',
              type: '',
              pageNum: 1,
              pageSize: 10
          }
          this.getList()
    },

    /** 导出按钮操作 */
    exportHandle() {
      if (this.queryParams.date) {
        this.queryParams.yearWeek = this.getWeek(this.queryParams.date)
      } else {
        this.queryParams.yearWeek = undefined
      }
      downLoadExcel('/weekly/anxinWeekly/export', this.addDateRange(this.queryParams, this.dateRange))
    },
     /** 修改按钮操作 */
    updateHandle(row) {
        this.formOpen = true
        const data = {
          id: row.id,
          yearWeek: row.yearWeek,
          createBy: row.id
        }
        this.$nextTick(() => {
           this.$refs.anxinWeeklyForm.isHideInit('1')
            // 调用form页面的 init 方法初始化数据
            this.$refs.anxinWeeklyForm.init(data)
        })
    },
    // 导出弹出层关闭
    exportCancel() {
      this.exportOpen = false
      this.dateRange = []
      this.resetForm('exportQueryParams')
    },
    // 获取日期d是哪一年的第几周
    getWeek(d) {
      // 截掉时分秒保留整数天
      var date = new Date((d || new Date()))
      // 设置日期为当前周周四
      date.setDate(date.getDate() + (4 - (date.getDay() || 7)))
      var year = date.getFullYear()

      var firstDate = new Date(year, 0, 1)

      firstDate.setDate(firstDate.getDate() + (4 - (firstDate.getDay() || 7)))
      // 当年第一天早于周四第一周延后七天
      if (firstDate.getFullYear() < year) {
        firstDate.setDate(firstDate.getDate() + 7)
      }
      // 计算当前周和第一周之间周数差
      var week = Math.ceil(((date - firstDate) / 86400000 + 1) / 7)
      return year + '' + ('0' + week).substr(-2)
    },
    getWeekStr(d) {
      var date = new Date((d || new Date()))
        // 设置日期为当前周周四
        date.setDate(date.getDate() + (4 - (date.getDay() || 7)))
        var year = date.getFullYear()
        var firstDate = new Date(year, 0, 1)

      firstDate.setDate(firstDate.getDate() + (4 - (firstDate.getDay() || 7)))
      // 当年第一天早于周四第一周延后七天
      if (firstDate.getFullYear() < year) {
        firstDate.setDate(firstDate.getDate() + 7)
      }
       // 计算当前周和第一周之间周数差
      var week = Math.ceil(((date - firstDate) / 86400000 + 1) / 7)
        return year + '年第' + week + '周'
    },
    duration(data) {
      if (data) {
          return '时长：' + data + ' 小时'
      }
      return ''
    },
    isRed({ row, column, columnIndex }) {
      if (columnIndex > 1 && row[column.property] === undefined) {
        return {
          backgroundColor: '#F56C6C'
        }
      }
    },
     tableRowClassName({ row }) {
       if (row.day1 || row.day2 || row.day3 || row.day4 || row.day5) {
             return ''
       } else {
            return 'warning-row'
       }
  }
  }
}
</script>
<style scoped lang="scss">
 .el-table .warning-row {
    background-color: #f39c12;
  }

  .el-table .success-row {
    background-color: #f39c12;
  }
 .pre {
    white-space: pre-line !important;
    word-break: break-all;
    word-wrap: break-word;
    text-align:left;
    line-height: 18px;
    color:#409EFF;
    cursor:pointer;
}
/* 修改部门 用户 select 宽度 */
/deep/.el-form .el-input {
  width: 100% !important;
}
/deep/.list-table .el-form--inline .el-form-item__content .el-input {
  width: 200px !important  ;
}
.w_deal{
   color: red;
}
.s_deal{
  color:#1abc9c;
}
/deep/.table-tranparent.el-table tbody tr:hover>td {
    background-color: transparent!important
}

/deep/.table-tranparent.el-table tbody tr:hover {
    background-color: transparent!important
}
</style>
